<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 600px;
            height: 600px;
            margin: 0px auto;
            position: relative;
        }

        .box>div {
            width: 200px;
            height: 200px;
            border: 1px solid rgb(211, 42, 220);
            box-sizing: border-box;
        /*     background-image: url("./小姐姐2.jpeg"); */
            position: absolute;
           /*  background-size: 600px 600px; */
           overflow: hidden;
            transition: all .2s;
        }
        .box > div img{
            position: absolute;
            width: 600px;
            height: 600px;
        }
        .start {
            text-align: center;
            padding: 30px 0;
        }

        button {
            height: 40px;
            width: 80px px;
            line-height: 40px;
            font-size: 18px;
            text-align: center;
            cursor: pointer;
            border: 1px solid black;
            background-color: #fff8dc;
            font-weight: 300;
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <div class="start"><button>开始</button></div>
    <!-- <p>
    1，导入图片，
    2，分割图片为九个小图片，
    3，点击图标开始九张图片随机打乱位置，
    4，然后点击同一位置复原图片回复原来位置。
    5，鼠标碰到小图时边框发生变化，
    6，移动图片到另一个图片上时，图片位置发生变化，图片互换。

</p> -->
    <div class="box">
    </div>
    <script>
        var arr = [{
            x: 0,
            y: 0,
            left: 0,
            top: 0
        }, {
            x: -200,
            y: 0,
            left: 200,
            top: 0
        }, {
            x: -400,
            y: 0,
            left: 400,
            top: 0
        }, {
            x: 0,
            y: -200,
            left: 0,
            top: 200
        }, {
            x: -200,
            y: -200,
            left: 200,
            top: 200
        }, {
            x: -400,
            y: -200,
            left: 400,
            top: 200
        }, {
            x: 0,
            y: -400,
            left: 0,
            top: 400
        }, {
            x: -200,
            y: -400,
            left: 200,
            top: 400
        }, {
            x: -400,
            y: -400,
            left: 400,
            top: 400
        }];
        var box = document.querySelector(".box"); // 获取盒子
        for (var i = 0; i < arr.length; i++) { // 建造
            var div = document.createElement("div");
            var img = document.createElement("img");
            img.draggable = false;
            img.src = "./小姐姐2.jpeg";
            img.style.left = arr[i].x + "px";
            img.style.top = arr[i].y + "px";
            div.appendChild(img);
            div.style.left = arr[i].left + "px";
            div.style.top = arr[i].top + "px";
            box.appendChild(div);
        }
        // 点击开始,设置.box中div根据arr数组的位置进行新的排序
        // 获取arr1作为一组0-arr.length-1的随机数不重复(用来做div新的排序顺序)
        // 根据新的数组arr1中元素找到arr中数据对div进行新的排序
        // 将开始按钮内容更改为恢复
        // 再次恢复来使用arr正常顺序重新定义div位置,回复正常排序
        // 获取所有.box下的div,设置允许拖拽.给每个div添加开始拖拽和结束拖拽
        // 在开始拖拽中记录被拖拽的元素的索引值,以及被拖拽元素当前所在位置的索引值; 
        // 在结束拖拽中,找到结束元素的索引值与结束元素所在位置索引值
        // 设置两个标签根据位置索引值得到的位置进行交换位置
        var divs = document.querySelectorAll(".box>div ")
        var but = document.querySelector("button");
        var arr1 = [];
        // 设置一个变量记录button点击的次数
        var cont = 0;
        but.onclick = function () {
            cont++;
            if (cont % 2 == 0) {
                but.innerHTML = "开始";
                for (let k = 0; k < divs.length; k++) {
                    divs[k].draggable = false;
                    divs[k].style.left = arr[k].left + "px";
                    divs[k].style.top = arr[k].top + "px";
                }
                return;
            }
            var arr1 = [];
            for (let i = 0; i < 1000; i++) {
                var num = Math.floor(Math.random() * arr.length);
                if (arr1.indexOf(num) < 0) arr1.push(num);
                if (arr1.length == arr.length) break;
            }
            console.log(arr1);
            for (let k = 0; k < divs.length; k++) {
                divs[k].draggable = true;
                divs[k].style.left = arr[arr1[k]].left + "px";
                divs[k].style.top = arr[arr1[k]].top + "px";
            }
            but.innerHTML = "恢复";
        }


        for (let j = 0; j < divs.length; j++) {

            divs[j].index = j;
            divs[j].addEventListener("dragstart", function (e) {
                e.dataTransfer.setData("startIndex", e.target.index);
            })
            divs[j].ondragover = function (e) {
                e.preventDefault()
            }
            divs[j].addEventListener("drop", function (e) {
                var n = e.target.parentNode.index;
                var m = e.dataTransfer.getData("startIndex");
                var obj1 = {}
                obj1.l = divs[m].style.left;
                obj1.t = divs[m].style.top;
                var obj2 = {};
                obj2.l = divs[n].style.left;
                obj2.t = divs[n].style.top;
                console.log(obj1);
                console.log(obj2);
                divs[m].style.left = obj2.l;
                divs[m].style.top = obj2.t;
                divs[n].style.left = obj1.l;
                divs[n].style.top = obj1.t;

                var num1 = arr1[n];
                arr1[n] = arr1[m];
                arr1[m] = num1;
                // console.log(arr1);
                var str = arr1.join("");
                console.log(str);
                if (str === "012345678") {
                    cont++;
                    arr1 = []
                    but.innerHTML = "开始";
                    alert("成功了");
                }

            })
        }
    </script>
</body>

</html>